{include file="public/header"}
<title>详情</title>
</head>
<style>
    td{
        text-align: center !important;
    }
    .ch-more-row-button{
        display: none;
    }
</style>
<div class="page-container">
    <div class="flex1  ch-row">
    <a class="ch-button ch-blue js" data-id="{$order_id}" href="javascript:;" title="新增">新增</a>
</div>
<div class="title-border">
    <div class="flex1 screen-phone">分类</div>
    <div class="flex1">名称</div>
    <div class="flex1">方量</div>
    <div class="flex1">价格</div>
    <div class="flex1 screen-phone">质保</div>
    <div class="flex1 screen-phone">总金额</div>
    <div class="flex1">操作</div>
</div>
<div id="opend">

</div>
    <h2 class="ch-info-title"><span class="glyphicon glyphicon-file"></span>赠送项目</h2>
    <div class="flex1 ch-row">
        <a class="ch-button ch-blue zi" data-id="{$order_id}" href="javascript:;" title="新增">添加自定义项目</a>
    </div>
    <div class="ch-column-over screen-pc" style="margin: 10px 0">
        <div class="ch-column-track">
            <div class="ch-column-row">
                <div class="ch-column-title">分类</div>
                <div class="ch-column-text">

                    <div class="ch-column-content ch-column-num">

                    </div>

                </div>
            </div>
            <div class="ch-column-row">
                <div class="ch-column-title">名称</div>
                <div class="ch-column-text">

                    <div class="ch-column-content ch-column-num">

                    </div>

                </div>
            </div>

        </div>
    </div>
    <div class="title-border">
        <div class="flex4">问题</div>
        <div class="flex4">贈送項目</div>
        <div class="flex1">优惠金额</div>
        <div class="flex1">天数</div>
        <div class="flex2">图片</div>
        <div class="flex2">备注</div>
        <div class="flex2">操作</div>
    </div>
    <div id="opends">

    </div>
    <!-- <table class="table table-border table-bordered table-bg table-hover table-sort screen-phone" style="margin-top: 8px;">
        <thead>
        <tr class="text-c">
            <th class="active">问题</th>
            <th class="active">优惠金额</th>
            <th class="active">天数</th>
            <th class="active">图片</th>
            <th class="active">备注</th>
        </tr>
        </thead>
        <tbody id="opends">

        </tbody>

    </table> -->
    <div class="row cl" style="text-align: right; margin-top: 20px;">
        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
            <button class="btn btn-primary radius" type="button" data-id="{$order_id}" ><i class="Hui-iconfont">&#xe632;</i> 确认提交</button>
        </div>
    </div>
    <div class="ch-more">
        <div class="ch-more-box">
            <div class="ch-more-top">
                <div class="ch-more-off"></div>
            </div>
            <div class="ch-more-tark">
                <div class="ch-more-content">
                    
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"}
<script>
    $(function(){
        var columnTitle = ($(window).width() - 30)*0.3;
        var columnContent = ($(window).width() - 30)*0.7;
        $(".ch-column-track").css({
            "width": columnTitle + (columnContent * $(".ch-column-num").length) + 'px',
            "padding-left": columnTitle,
        });
        $(".ch-column-title").css("width",columnTitle);

        $(".ch-column-content").css("width",columnContent);
        for( var i=0;i<$(".ch-column-title").length;i++){
            $(".ch-column-title").eq(i).css("height",$(".ch-column-text").eq(i).height())
        }
    })
</script>
<script>
    

     $(function(){
         var id=$('.js').attr('data-id');
         var lo=JSON.parse(localStorage.getItem(id));
         var los=JSON.parse(localStorage.getItem(id+'z'));
        var zhi='';
         if(lo){
            for (var i=0;i<lo.length;i++){
                if(lo[i].zhi==0){
                      zhi="否"
                }else {
                     zhi="是"
                }
                var html = `
                    <div class="content-border">
                        <div class="flex1 screen-phone">${lo[i].class_a}</div>
                        <div class="flex1">${lo[i].class_b}</div>
                        <div class="flex1">${lo[i].square}</div>
                        <div class="flex1">${lo[i].un_Price}</div>
                        <div class="flex1 screen-phone">${zhi}</div>
                        <div class="flex1 screen-phone">${(lo[i].un_Price*lo[i].square).toFixed(2)}</div>
                        <div class="flex1">
                            <a href="javascript:;" class="screen-pc more ch-button ch-blue">更多</a>
                            <a href="javascrtpt:;" class="shan ch-button ch-blue" data-name="${lo[i].class_b}">删除</a> 
                        </div>
                    </div>
                `
                $('#opend').append(html);
            }


        }
         if(los){
             for (var i=0;i<los.length;i++){
                 var html = `
                 <div class="content-border">
                    <div class="flex4">${los[i].wen_a}</div>
                    <div class="flex4">${los[i].give_b}</div>
                    <div class="flex1">${los[i].give_money}</div>
                    <div class="flex1">${los[i].gong}</div>
                    <div class="flex2 ss"></div>
                    <div class="flex2">${los[i].give_remarks}</div>
                    <div class="flex2"><a class="shan1 ch-button ch-blue" data-wen="${los[i].wen_a}">删除</a></div>
                </div>
                 `
                 $('#opends').append(html);
                 for (var j=0;j<los[i].capitalgo.length;j++) {
                     var html1= '<img src="'+los[i].capitalgo[j]+'" style="width: 20%">';
                     $('.ss').append(html1);
                 }

             }


         }

     });
     $(document).on("click", ".shan", function () {
         var id=$('.js').attr('data-id');
         var lo=JSON.parse(localStorage.getItem(id));
         var shan=$(this).attr('data-name');
         for (var i=0;i<lo.length;i++) {
             if(lo[i].class_b== shan){
                 $(this).parent().parent().remove();
                 lo.splice(i,1)
                 localStorage.setItem(id,JSON.stringify(lo))
             }

         }
     });
     $(document).on("click", ".shan1", function () {

         var id=$('.js').attr('data-id');
         var los=JSON.parse(localStorage.getItem(id+'z'));
         var shan1=$(this).attr('data-wen');
         for (var i=0;i<los.length;i++) {
             if(los[i].wen_a== shan1){
                 $(this).parent().parent().remove();
                 los.splice(i,1)
                 localStorage.setItem(id+'z',JSON.stringify(los))
             }

         }
     });

    /***
     *
     *
     * 提交代码
     * */
    $('.radius').click(function () {
        var id=$('.js').attr('data-id');
        var src="{:Url('index/order/jilie')}";
        var lo=localStorage.getItem(id);
        var los=localStorage.getItem(id+'z');

        $.ajax({
            type: 'POST',
            url: src,
            dataType: 'json',
            data:{data:lo,datas:los,id:id},
            success: function (data) {
                var res=JSON.parse(data);
                if(res.code==200){
                    var id=$('.js').attr('data-id');
                    localStorage.removeItem(id);
                    localStorage.removeItem(id+'z');
                    parent.location.reload()
                }else{
                    layer.msg(res.msg,{icon: 5,time:1000});
                }

            },
            error: function (data) {
                console.log(data.msg);
            },
        });




    });
    /**
     * 基建
     */
    $('.js').click(function () {
        var winWidth = $(window).width();
        var areaWidth = "";
        var areaHeight = "";
        if( winWidth > 768 ){
            areaWidth = "800px"
            areaHeight = "700px"
        } else {
            areaWidth = '100%'
            areaHeight = '100%'
        }
        var id=$(this).attr('data-id');

        var src="{:Url('index/order/ji')}";
        layer.open({
            type: 2,
            area: [areaWidth, areaHeight],
            fix: false,
            maxmin: true,
            shade:0.4,
            title: '基建添加',
            content: src+'?order_id='+id
        });
    });
     /**
      * 基建
      */
     $('.zi').click(function () {
         var winWidth = $(window).width();
         var areaWidth = "";
         var areaHeight = "";
         if( winWidth > 768 ){
             areaWidth = "800px"
             areaHeight = "700px"
         } else {
             areaWidth = '100%'
             areaHeight = '100%'
         }
         var id=$(this).attr('data-id');
         var src="{:Url('index/order/zi')}";
         layer.open({
             type: 2,
             area: [areaWidth, areaHeight],
             fix: false,
             maxmin: true,
             shade:0.4,
             title: '基建添加',
             content: src+'?order_id='+id
         });
     });

</script>

<script type="text/javascript" src="{$Think.DOMAIN_SRC}/static/h-ui.admin/js/CH-ui.js"></script>
